import React, { useState } from 'react'
import { Form, Input } from 'react-vant';

import { Tabs, Button } from 'antd-mobile'
import { codedata } from '../request/api';
import useThrottle from '../hooks/useThrottle'
function FormUI() {
    let [title, settitle] = useState('获取验证码')
    let [aa, setaa] = useState(false)
    // 密码
    const [form1] = Form.useForm()

    const onFinish1 = useThrottle((values) => {
        console.log(values)
        console.log('aaa')
    },1000)

    // ------------------------------
    // 手机号
    const [form] = Form.useForm()

    const onFinish = values => {
        console.log(values)

    }
    // 点击按钮倒计时
    let dian = (tel) => {
        let sj = 60
        
        let dsq = setInterval(() => {
            setaa(true)
            // console.log('aa', aa)
            settitle(`${sj--}后可重发`)

            if (sj == 0) {
                setaa(false)
                settitle('获取验证码')
                clearInterval(dsq)
                sj = 60
            }
        }, 1000)
        codedata(tel).then(res => {
            console.log('code', res)
        })
    }
    return (
        <div>
            <Tabs>
                <Tabs.Tab title='账号密码登录' key='账号密码登录'>
                    {/* 账号密码登录 */}
                    <Form
                        form={form1}
                        onFinish={onFinish1}
                        // 底部提交按钮
                        footer={
                            <div style={{ margin: '16px 16px 0' }}>
                                <Button block color='warning'>
                                    提交
                                </Button>
                            </div>
                        }
                    >
                        <Form.Item
                            rules={[{ required: true, message: '请填写用户名' }]}
                            name='username'
                            label='+86'
                        >
                            <Input placeholder='请输入用户名' />
                        </Form.Item>
                        <Form.Item
                            rules={[{ required: true, message: '请填写密码' }]}
                            name='password'
                            label='密码'
                        >
                            <Input placeholder='请输入密码' />
                        </Form.Item>
                    </Form>
                </Tabs.Tab>
                <Tabs.Tab title='手机号登录' key='手机号登录'>
                    {/* 手机号 */}
                    <Form
                        form={form}
                        onFinish={onFinish}
                        // 底部提交按钮
                        footer={
                            <div style={{ margin: '16px 16px 0' }}>
                                <Button block color='warning'>
                                    提交
                                </Button>
                            </div>
                        }
                    >
                        <Form.Item
                            rules={[{ required: true, message: '请填写用户名' }]}
                            name='tel'
                            label='+86'
                        >
                            <Input placeholder='请输入用户名' />
                        </Form.Item>
                        <Form.Item
                            rules={[{ required: true, message: '请填写密码' }]}
                            name='code'
                            label='验证码'
                        >

                            <Input placeholder='请输入密码' /><Button style={{ 
                                fontSize: '11px', width: '120px', disabled: aa  }}
                                onClick={() => dian()} >{title}</Button>
                        </Form.Item>
                    </Form>
                </Tabs.Tab>

            </Tabs>





        </div>
    )
}

export default FormUI
